<template>
  <div>
    <TopFilter :list="formList" :cols="3" :rows="2" :labelWidth="90" @filterChange="searchHealthHandle"></TopFilter>

    <FilterTable ref="table" :columns="columns" :fetchapi="fetchApi" :datakey="'rows'" :params="fetchParams" :onColumnsChange="columns => (this.columns = columns)" :height="250"> </FilterTable>

    <BaseDialog :visible.sync="detailedVisible" title="维修案例明细" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <detaileCase :rowData="rowData" @close="closeHandler" />
    </BaseDialog>
  </div>
</template>

<script>
import { dictionary } from '@/utils/dictMixin';
import { queryRepairCase, getSeries, getDaultPosition, getDefectType } from '@/api/repair/repairExample/repairCaseQuery/index';
import { jsonToHump } from '@/utils/index'; // 驼峰引用
import _ from 'lodash'; // 拷贝引用
import detaileCase from './detaileCase';
export default {
  name: 'repairCaseQueryget',
  components: {
    detaileCase
  },
  mixins: [dictionary],
  data() {
    this.BaseTable = null;
    return {
      formList: this.createFormList(),
      fetchApi: queryRepairCase,
      fetchParams: { xhrAbort: true }, // 调用数据
      columns: this.createTablelist(),
      detailedVisible: false, // 明细页面
      rowData: {}
    };
  },

  mounted() {
    this.getSeriesSelect(); // 查询车系
    this.faultLocation(); // 故障部位
    this.defectType(); // 缺陷类型
  },
  methods: {
    createFormList() {
      return [
        {
          type: 'SELECT',
          label: '故障部位',
          fieldName: 'faultPosition',
          filterable: true,
          itemList: []
        },

        {
          type: 'SELECT',
          label: '缺陷类型',
          fieldName: 'defectClass',
          filterable: true,
          itemList: []
        },
        {
          type: 'INPUT',
          label: '表单号',
          fieldName: 'form_no'
        },
        {
          type: 'RANGE_DATE',
          dateType: 'exactdaterange',
          label: '确认日期',
          fieldName: 'confirmationStart|confirmationEnd'
        },
        {
          type: 'SELECT',
          label: '车系',
          fieldName: 'series',
          itemList: []
        }
      ];
    },
    createTablelist() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 80,
          render: props => {
            return (
              <div>
                <el-button size="mini" type="text" onClick={() => this.detailHandle(props.row)}>
                  明细
                </el-button>
              </div>
            );
          }
        },
        {
          title: '确认时间',
          dataIndex: 'D_CONFIRM',
          sorter: true
        },
        {
          title: '表单号',
          dataIndex: 'EXAMPLE_NO',
          sorter: true
        },
        {
          title: '表单状态',
          dataIndex: 'STATUS',
          sorter: true
        },
        {
          title: '车系',
          dataIndex: 'SERIES_NAME',
          sorter: true
        },
        {
          title: '故障系统名称',
          dataIndex: 'FAULT_SYSTEM_NAME',
          sorter: true,
          showOverflowTooltip: true
        },
        {
          title: '故障件代码',
          dataIndex: 'FAULT_PART_CODE',
          sorter: true,
          showOverflowTooltip: true
        },
        {
          title: '故障件名称',
          dataIndex: 'FAULT_PART_NAME',
          sorter: true,
          showOverflowTooltip: true
        },
        {
          title: '缺陷类型代码',
          dataIndex: 'DEFECT_CLASS_CODE',
          sorter: true,
          showOverflowTooltip: true
        },
        {
          title: '缺陷类型名称',
          dataIndex: 'DEFECT_CLASS_NAME',
          sorter: true,
          showOverflowTooltip: true
        },
        {
          title: '故障部位名称',
          dataIndex: 'FAULT_POSIITON_NAME',
          sorter: true,
          showOverflowTooltip: true
        },
        {
          title: '故障部位代码',
          dataIndex: 'FAULT_POSIITON_CODE',
          sorter: true,
          showOverflowTooltip: true
        },
        {
          title: '故障现象详细描述',
          dataIndex: 'FAULT_DESC',
          sorter: true,
          showOverflowTooltip: true
        },
        {
          title: '故障发生时间',
          dataIndex: 'FAULT_BEGIN_TIME',
          sorter: true,
          showOverflowTooltip: true
        },
        {
          title: '最终解决方案',
          dataIndex: 'FINALLY_SOLUTION',
          sorter: true,
          showOverflowTooltip: true
        },
        {
          title: '问题解决渠道',
          dataIndex: 'SOLUTION_NAME',
          sorter: true,
          showOverflowTooltip: true
        },
        {
          title: '推送人',
          dataIndex: 'PUSH_MAN_NAME',
          sorter: true,
          showOverflowTooltip: true
        },
        {
          title: '推送日期',
          dataIndex: 'PUSH_DATE',
          sorter: true,
          showOverflowTooltip: true
        },
        {
          title: '取消推送日期',
          dataIndex: 'CANCEL_DATE',
          sorter: true,
          showOverflowTooltip: true
        },
        {
          title: '案例的分-经销商评分',
          dataIndex: 'DEALER_SCORE',
          sorter: true,
          showOverflowTooltip: true
        },
        {
          title: '案例的分-厂家评分',
          dataIndex: 'FACTORY_SCORE',
          sorter: true,
          showOverflowTooltip: true
        },
        {
          title: '案例-汇总得分',
          dataIndex: 'SOLUTION_SCORE',
          sorter: true,
          showOverflowTooltip: true
        }
      ];
    },

    add() {
      this.detailedVisible = true;
    },
    // 查询展示故障部位下拉框
    async faultLocation() {
      let res = await getDaultPosition();
      console.log(res.data, '1111');
      this.formList.find(item => item.fieldName === 'faultPosition').itemList = res.data.map(x => ({ value: x.FAULT_LOCATION_NAME, text: x.FAULT_LOCATION_CODE }));
    },
    // 查询展示缺陷类型下拉框
    async defectType() {
      let res = await getDefectType();
      console.log(res.data, '2222');
      this.formList.find(item => item.fieldName === 'defectClass').itemList = res.data.map(x => ({ value: x.DEFECT_TYPE_NAME, text: x.DEFECT_TYPE_CODE }));
    },

    // 查询车系
    async getSeriesSelect() {
      const res = await getSeries();
      this.formList.find(item => item.fieldName === 'series').itemList = res.data.map(x => ({ value: x.SERIES_ID, text: x.SERIES_NAME }));
    },
    // 点击明细按钮，打开页面传值
    detailHandle(row) {
      this.detailedVisible = true;
      this.rowData = _.cloneDeep(row);
      jsonToHump(this.rowData);
    },
    // 关闭明细页面
    closeHandler() {
      this.detailedVisible = false;
    },

    searchHealthHandle(val) {
      console.log(val, 'val');
      const params = Object.assign({}, val, { xhrAbort: false });
      this.fetchParams = params;
    }

    // collapseHandle() {
    //   this.$nextTick(() => {
    //     this.BaseTable.EXECUTE_RESET_HEIGHT();
    //   });
    // }
  }
};
</script>

<style scoped lang="less"></style>
